<script setup>
defineProps({
    variant: {
        type: String,
        validator(variant) {
            return ["contained", "gradient", "outline"].includes(variant);
        },
        default: "contained",
    },
    color: {
        validator(color) {
            return ["primary", "secondary", "info", "success", "warning", "danger", "error", "light", "white", "dark", "none"].includes(color);
        },
        default: "",
    },
    size: {
        validator(size) {
            return ["sm", "md", "lg"].includes(size);
        },
        default: "md",
    },
    fullWidth: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    type: {
        type: String,
        default: "button",
    },
});
function getClasses(variant, color, size, fullWidth, disabled) {
    let colorValue, sizeValue, fullWidthValue, activeValue;

    // Setting the button variant and color
    if (variant === "gradient") {
        colorValue = `bg-gradient-${color}`;
    } else if (variant === "outline") {
        colorValue = `btn-outline-${color}`;
    } else {
        colorValue = `btn-${color}`;
    }

    sizeValue = size && `btn-${size}`;

    fullWidthValue = fullWidth && `w-100`;

    activeValue = disabled && `disabled`;

    return `${colorValue} ${sizeValue} ${fullWidthValue} ${activeValue}`;
}
</script>
<template>
    <button class="btn" :class="getClasses(variant, color, size, fullWidth, disabled)" :type="type">
        <slot />
    </button>
</template>
